<template>
  <div class="main">
    <div class="title">
      {{title}}
    </div>
    <div class="choice">
      <el-form ref="form" :model="form" label-width="100px">
        <el-form-item label="综合频道：">
            <el-radio-group v-model="form.radio1" size="small">
              <el-radio label="1" border>备选项1</el-radio>
              <el-radio label="2" border>备选项2</el-radio>
              <el-radio label="2" border>备选项1</el-radio>
              <el-radio label="2" border>备选项2</el-radio>
              <el-radio label="2" border>备选项1</el-radio>
              <el-radio label="2" border>备选项2</el-radio>
              <el-radio label="2" border>备选项1</el-radio>
              <el-radio label="2" border>备选项2</el-radio>
              <el-radio label="2" border>备选项1</el-radio>
              <el-radio label="2" border>备选项2</el-radio>
              <el-radio label="2" border>备选项1</el-radio>
              <el-radio label="2" border>备选项2</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="综合门户：">
            <el-radio-group v-model="form.radio1" size="small">
              <el-radio label="1" border>备选项1</el-radio>
              <el-radio label="2" border>备选项2</el-radio>
              <el-radio label="2" border>备选项1</el-radio>
              <el-radio label="2" border>备选项2</el-radio>
              <el-radio label="2" border>备选项1</el-radio>
              <el-radio label="2" border>备选项2</el-radio>
              <el-radio label="2" border>备选项1</el-radio>
              <el-radio label="2" border>备选项2</el-radio>
              <el-radio label="2" border>备选项1</el-radio>
              <el-radio label="2" border>备选项2</el-radio>
              <el-radio label="2" border>备选项1</el-radio>
              <el-radio label="2" border>备选项2</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="覆盖区域：">
            <el-radio-group v-model="form.radio1" size="small">
              <el-radio label="1" border>备选项1</el-radio>
              <el-radio label="2" border>备选项2</el-radio>
              <el-radio label="2" border>备选项1</el-radio>
              <el-radio label="2" border>备选项2</el-radio>
              <el-radio label="2" border>备选项1</el-radio>
              <el-radio label="2" border>备选项2</el-radio>
              <el-radio label="2" border>备选项1</el-radio>
              <el-radio label="2" border>备选项2</el-radio>
              <el-radio label="2" border>备选项1</el-radio>
              <el-radio label="2" border>备选项2</el-radio>
              <el-radio label="2" border>备选项1</el-radio>
              <el-radio label="2" border>备选项2</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="新闻源：">
            <el-radio-group v-model="form.radio1" size="small">
              <el-radio label="1" border>不限</el-radio>
              <el-radio label="2" border>百度新闻源</el-radio>
              <el-radio label="2" border>非百度新闻源</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="收录情况：">
            <el-radio-group v-model="form.radio1" size="small">
              <el-radio label="1" border>不限</el-radio>
              <el-radio label="2" border>包收录</el-radio>
              <el-radio label="2" border>不包收录</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="入口级别：">
            <el-radio-group v-model="form.radio1" size="small">
              <el-radio label="1" border>不限</el-radio>
              <el-radio label="2" border>没有入口</el-radio>
              <el-radio label="2" border>首页入口</el-radio>
              <el-radio label="2" border>频道入口</el-radio>
              <el-radio label="2" border>上级入口</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="特背行业：">
            <el-radio-group v-model="form.radio1" size="small">
              <el-radio label="1" border>不限</el-radio>
              <el-radio label="2" border>b2b</el-radio>
              <el-radio label="2" border>微商</el-radio>
              <el-radio label="2" border>留学</el-radio>
              <el-radio label="2" border>健康</el-radio>
              <el-radio label="2" border>加盟</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="活动媒体：">
            <el-radio-group v-model="form.radio1" size="small">
              <el-radio label="1" border>不限</el-radio>
              <el-radio label="2" border>活动媒体</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="连接类型：">
            <el-radio-group v-model="form.radio1" size="small">
              <el-radio label="1" border>不限</el-radio>
              <el-radio label="2" border>活动媒体</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="发稿速度：">
            <el-radio-group v-model="form.radio1" size="small">
              <el-radio label="1" border>不限</el-radio>
              <el-radio label="2" border>活动媒体</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="周末可发：">
            <el-radio-group v-model="form.radio1" size="small">
              <el-radio label="1" border>不限</el-radio>
              <el-radio label="2" border>活动媒体</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="价格分类：">
            <el-radio-group v-model="form.radio1" size="small">
              <el-radio label="1" border>不限</el-radio>
              <el-radio label="2" border>活动媒体</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="排序：">
            <el-radio-group v-model="form.radio1" size="small">
              <el-radio label="1" border>不限</el-radio>
              <el-radio label="2" border>活动媒体</el-radio>
            </el-radio-group>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <div style="margin-top: 20px">
        <el-form ref="form" :model="form" label-width="100px">
          <el-radio-group v-model="form.radio2" size="medium" class="botradio">
            <el-radio-button label="1" >媒体查找</el-radio-button>
            <el-radio-button label="2">今日推荐</el-radio-button>
            <el-radio-button label="3">今日新增</el-radio-button>
            <el-radio-button label="4">收藏夹</el-radio-button>
          </el-radio-group>
          <vue-seamless-scroll :data="newsList" :class-option="optionLeft" class="seamless-warp2">
            <ul class="item">
                <li v-for="item in newsList" v-text="item.title"></li>
            </ul>
          </vue-seamless-scroll>
          <el-button type="primary"  size="medium" class="excel">导出Excel</el-button>
          <el-form-item label="搜索媒体：" class="mname">
              <el-input v-model="form.input" placeholder="请输入要搜索的媒体名称"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="table_bottom">
      <el-table
        ref="multipleTable"
        :data="tableData"
        stripe
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="55"
          header-align="center"
          align="center">
        </el-table-column>
        <el-table-column
          prop="channel"
          label="频道类型	"
          width="120"
          header-align="center"
          align="center">
        </el-table-column>
        <el-table-column
          prop="mediaName"
          label="媒体名称"
          width="120"
          header-align="center"
          align="center">
        </el-table-column>
        <el-table-column
          prop="vip"
          label="普通会员价格"
          header-align="center"
          align="center"
          width="120"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="agent"
          label="代理商价格"
          width="120"
          header-align="center"
          align="center">
        </el-table-column>
        <el-table-column
          prop="releaseTime"
          label="平均出稿时间"
          width="120"
          header-align="center"
          align="center"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="releaseRate"
          label="出稿率"
          width="120"
          header-align="center"
          align="center">
        </el-table-column>
        <el-table-column
          label="电脑权重 "
          width="120"
          header-align="center"
          align="center"
          show-overflow-tooltip>
           <template slot-scope="scope">
             <div>
               <img :src="require(`@/assets/baidu${scope.row.pcWeight}.png`)"/>
             </div>
           </template>
        </el-table-column>
        <el-table-column
          label="移动权重 "
          width="120"
          header-align="center"
          align="center">
          <template slot-scope="scope">
            <div>
              <img :src="require(`@/assets/baidu${scope.row.mWeight}.png`)"/>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="sources"
          label="新闻源 "
          width="120"
          header-align="center"
          align="center"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="link"
          label="链接情况 "
          width="120"
          header-align="center"
          align="center">
        </el-table-column>
        <el-table-column
          prop="remarks"
          label="备注 "
          header-align="center"
          align="center"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="collection"
          label="收藏 "
          width="120"
          header-align="center"
          align="center"
          show-overflow-tooltip>
        </el-table-column>
      </el-table>
    </div>

  </div>
</template>

<script>
export default {
  props: [
    'title'
  ],
  data () {
    return {
      form: {
        radio1: '1',
        radio2:"1",
        input:""
      },
      newsList: [{
        'title': '1.优势网站:体育头条，运动头条，娱乐头条，时尚头条全包收录'
      }, {
        'title': '2.完美时尚、爱秀美丽、O时尚、看车讯、全球汽车、新美妆包收录'
      },
      {
        'title': '3.苏先生是最帅的'
      }],
      tableData:[{
        channel:"新闻资讯",
        mediaName:" 和讯网山东",
        vip:"28.00",
        agent:"26.00",
        releaseTime:"1小时22分钟",
        releaseRate:"98%",
        pcWeight:"1",
        mWeight:"2",
        sources:"百度新闻源",
        link:"不可带网址",
        remarks:"不带联系方式，默认自动删除。金融医疗相关都可发！",
        collection:"心"
      },
      {
        channel:"新闻资讯",
        mediaName:" 和讯网山东",
        vip:"28.00",
        agent:"26.00",
        releaseTime:"1小时22分钟",
        releaseRate:"98%",
        pcWeight:"9",
        mWeight:"6",
        sources:"百度新闻源",
        link:"不可带网址",
        remarks:"不带联系方式，默认自动删除。金融医疗相关都可发！",
        collection:"心"
      },
      {
        channel:"新闻资讯",
        mediaName:" 和讯网山东",
        vip:"28.00",
        agent:"26.00",
        releaseTime:"1小时22分钟",
        releaseRate:"98%",
        pcWeight:"10",
        mWeight:"2",
        sources:"百度新闻源",
        link:"不可带网址",
        remarks:"不带联系方式，默认自动删除。金融医疗相关都可发！",
        collection:"心"
      },
      {
        channel:"新闻资讯",
        mediaName:" 和讯网山东",
        vip:"28.00",
        agent:"26.00",
        releaseTime:"1小时22分钟",
        releaseRate:"98%",
        pcWeight:"8",
        mWeight:"7",
        sources:"百度新闻源",
        link:"不可带网址",
        remarks:"可发医疗。出稿快。收录好。权重高。一般当天就能收录，若发布七天后还未收录，请联系客服。如星期5发布的稿子，下星期六还未收录，则可联系客服退款。",
        collection:"心"
      },
      {
        channel:"新闻资讯",
        mediaName:" 和讯网山东",
        vip:"28.00",
        agent:"26.00",
        releaseTime:"1小时22分钟",
        releaseRate:"98%",
        pcWeight:"1",
        mWeight:"2",
        sources:"百度新闻源",
        link:"不可带网址",
        remarks:"不带联系方式，默认自动删除。金融医疗相关都可发！",
        collection:"心"
      }]

    };
  },
  computed: {
    optionLeft () {
      return {
        direction: 2,
        limitMoveNum: 2
      }
    }
  },
  methods: {
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      }
    }
}
</script>

<style lang="scss" scoped>
.main{
  min-height: 755px;
  min-width: 1000px;
}
.botradio{
  float:left;
}
.excel{
  float: left;
}
.table_bottom{
  margin-bottom: 86px;
}
.seamless-warp2 {
  overflow: hidden;
  height: 33px;
  width: 380px;
  float: left;
  margin: 0 20px;
  border:1px solid #dedfe6;
  color: #ff7b00;
  ul.item {
    width: 1300px;
    li {
        float: left;
        margin-right: 20px;
        list-style:none;
        margin-top: -8px;
    }
  }
}
.title {
    color: #F37B1D;
    font-weight: 700;
    padding-bottom: 16px;
    font-size: 18px;
    border-bottom: 1px #dedede solid;
}
.mname{
  width: 310px;
  float: left;
}
.choice{
  margin-top: 18px;
  .el-radio{
    margin:0 8px 8px 0;
  }
  .el-radio.is-bordered+.el-radio.is-bordered{
    margin-left:0;
  }
  .el-form-item{
    margin-bottom: 2px;
  }
}
#footer_box {
    z-index: 999;
    position: fixed;
    left: 243px;
    bottom: 0;
    height: auto;
    border-top: 1px solid #26A7E0;
    padding: 10px;
    background: #4795C5;
    color: #fff;
    width: 100%;
    font-size: 14px;
    padding-top: 27px;
    margin-left: 6px;
    padding-left: 441px;
    .am-btn-group,
    .am-btn-group-stacked {
        position: relative;
        display: inline-block;
        vertical-align: middle;
    }
    .el-button--primary {
        background: #ea6e0c;
        margin-left: 11px;
    }
}
</style>
